<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <!-- 订单搜索表单-->
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="orderShow == false">
        <el-form-item
          v-show=" tabName === '打印订单列表' || tabName === '设备订单记录'"
          label="订单类型"
        >
          <el-select
            v-model="queryParams.type"
            placeholder="订单类型"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="type in orderTypeOptions"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="tabName === '订单列表'" label="订单状态">
          <el-select
            v-model="queryParams.statusCode"
            placeholder="订单状态"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="statu in orderStatusOptions"
              :key="statu.value"
              :label="statu.label"
              :value="statu.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="tabName != '办公打印列表' && tabName != '设备订单记录'" label="订单编号">
          <el-input
            v-model="queryParams.number"
            placeholder="订单编号"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item
          v-show="tabName != '商品订单列表' && tabName != '办公打印列表' && tabName != '设备订单记录'"
          label="用户名称"
        >
          <el-input
            v-model="queryParams.userName"
            placeholder="用户名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item v-show="tabName === '商品订单列表'" label="商品名称">
          <el-input
            v-model="queryParams.commodityName"
            placeholder="商品名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item v-show="tabName === '办公打印列表'" label="打印规格">
          <el-select
            v-model="queryParams.typeCode"
            placeholder="打印规格"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="item in printOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="tabName === '办公打印列表'" label="打印数量">
          <el-input-number
          v-model="queryParams.minCount"
          style="width:150px;"
          controls-position="right"
          :min="0"
          :precision="2"
          :step="0.1"
          size="small" />
          <span>~</span>
          <el-input-number
          v-model="queryParams.maxCount"
          style="width:150px;"
          controls-position="right"
          :min="0"
          :precision="2"
          :step="0.1"
          size="small" />
        </el-form-item>
        <el-form-item v-show="tabName === '设备订单记录'" label="设备编号">
          <el-input
            v-model="queryParams.facilityCode"
            placeholder="设备编号"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item v-show="tabName != '商品订单列表'" label="时间段">
          <el-date-picker
            v-model="date"
            :picker-options="pickerOptions"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-show="tabName === '订单列表' && orderShow == false " :data="tableData" stripe style="width: 100%">
        <el-table-column prop="number" label="订单编号" align="center"></el-table-column>
        <el-table-column prop="userId" label="用户id" align="center"></el-table-column>
        <el-table-column prop="userName" label="用户名称" align="center"></el-table-column>
        <el-table-column prop="gaddress.phone" label="收货人电话" align="center"></el-table-column>
        <el-table-column prop="addressName" label="用户收货地址" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.gaddress.positionProvinceValue}}</span>
            <span v-if="scope.row.gaddress.positionCityValue">/{{scope.row.gaddress.positionCityValue}}</span>
            <span v-if="scope.row.gaddress.positionAreaValue">/{{scope.row.gaddress.positionAreaValue}}</span>
            <span v-if="scope.row.gaddress.positionDetails">/{{scope.row.gaddress.positionDetails}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="money" label="订单金额" align="center"></el-table-column>
        <el-table-column prop="payMoney" label="实付金额" align="center"></el-table-column>
        <el-table-column prop="statusValue" label="订单状态" align="center"></el-table-column>
        <!-- <el-table-column prop="date" label="订单类型" align="center"></el-table-column> -->
        <el-table-column prop="isSend" label="是否发货" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSend == true">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建日期" width="100px" align="center"></el-table-column>
        <el-table-column prop="logisticsNumber" label="物流号" align="center"></el-table-column>
        <el-table-column  fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <i
            class="el-icon-search"
            style="font-size: 12px;color: #409EFF;cursor:pointer;"
            @click="goToCommodity(scope.row.orderCommodityList)"
            >查看商品</i>
            <i
            class="el-icon-message"
            style="font-size: 12px;color: #409EFF;cursor:pointer;"
            @click="updateOrder(scope.row.id)"
            >发货</i>
            <i
            class="el-icon-delete"
            style="font-size: 12px;color: #F56C6C;cursor:pointer;"
            @click="remove(scope.row.id)"
            >删除</i>
          </template>
        </el-table-column>
      </el-table>
      <!-- 订单商品列表 -->
      <el-table
      v-show="tabName === '订单列表' && orderShow == true "
      :data="tableData.slice((currentPage-1)*size,currentPage*size)"
      stripe
      style="width: 100%">
          <el-table-column
          fixed="left"
          label="操作"
          width="100px"
          align="center">
              <template slot="header" slot-scope="scope">
                  <i class="el-icon-back" style="font-size: 12px;color: #409EFF;cursor:pointer;" @click="backToOrder()">返回</i>
              </template>
          </el-table-column>
          <el-table-column
          prop="commodityId"
          label="商品id"
          align="center">
          </el-table-column>
          <el-table-column
          prop="litimgUrl"
          label="商品缩略图"
          align="center">
              <template slot-scope="scope">
                  <img v-show="scope.row.litimgUrl" :src="scope.row.litimgUrl" class="url">
              </template>
          </el-table-column>
          <el-table-column
          prop="commodityName"
          label="商品名称"
          align="center">
          </el-table-column>
          <el-table-column
          prop="count"
          label="商品数量"
          align="center">
          </el-table-column>
          <el-table-column
          prop="orderNumber"
          label="订单编号"
          align="center">
          </el-table-column>
          <el-table-column
          prop="modelName"
          label="规格名称"
          align="center">
          </el-table-column>
      </el-table>

      <el-table v-show="tabName === '打印订单列表'"  :data="tableData" stripe style="width: 100%">
        <el-table-column prop="number" label="订单编号" align="center"></el-table-column>
        <el-table-column prop="userId" label="用户id" align="center"></el-table-column>
        <el-table-column prop="userName" label="用户名称" align="center"></el-table-column>
        <el-table-column prop="facilityName" label="设备名称" align="center"></el-table-column>
        <el-table-column prop="facilityCode" label="设备编号" align="center"></el-table-column>
        <el-table-column prop="typeCodeValue" label="订单类型" align="center"></el-table-column>
        <el-table-column prop="money" label="订单金额" align="center"></el-table-column>
        <el-table-column prop="createDate" label="订单日期"   align="center"></el-table-column>
        <el-table-column prop="pay" label="支付状态"  align="center">
          <template slot-scope="scope">
             {{scope.row.pay?'支付成功':'未支付'}}
          </template>
        </el-table-column>
        <el-table-column prop="payDate" label="支付时间" width="100px" align="center">
          <template slot-scope="scope">
             {{scope.row.pay?scope.row.payDate:'' }}
          </template>
          </el-table-column>
          <el-table-column prop="separate" label="分账状态" width="100px" align="center">
            <template slot-scope="scope">
               {{scope.row.separate?'已分账':'未分账' }}
            </template>
            </el-table-column>
        <el-table-column  fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <i class="el-icon-setting"
             style="font-size: 12px;color: #409EFF;cursor:pointer;"
             v-if="isAccountShow(scope.row)"
             @click="profitsharing(scope.row.id)"
              >分账</i>
          </template>
        </el-table-column>
      </el-table>

      <el-table v-show="tabName === '商品订单列表'"  :data="tableData" stripe style="width: 100%">
        <el-table-column prop="orderNumber" label="订单编号" align="center"></el-table-column>
        <el-table-column prop="commodityName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="gcommodity.price" label="商品金额" align="center"></el-table-column>
        <el-table-column prop="count" label="商品数量" align="center"></el-table-column>
        <el-table-column prop="createDate" label="下单时间" width="100px" align="center"></el-table-column>
        <el-table-column prop="gcommodity.facilityTypeValue" label="商品类型" align="center"></el-table-column>
      </el-table>

      <el-table v-show="tabName === '办公打印列表'"  :data="tableData" stripe style="width: 100%">
        <el-table-column prop="typeCodeValue" label="打印规格" align="center"></el-table-column>
        <el-table-column prop="colours" label="打印颜色" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.colours == true">黑白</span>
            <span v-else>彩色</span>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="打印日期" width="100px" align="center"></el-table-column>
        <el-table-column prop="count" label="打印数量" align="center"></el-table-column>
      </el-table>

      <el-table v-show="tabName === '设备订单记录'" :data="tableData" stripe style="width: 100%">
        <el-table-column prop="facilityName" label="设备名称" align="center"></el-table-column>
        <el-table-column prop="facilityCode" label="设备编号" align="center"></el-table-column>
        <el-table-column prop="typeValue" label="订单类型" align="center"></el-table-column>
        <el-table-column prop="createDate" label="订单日期" width="100px" align="center"></el-table-column>
        <el-table-column prop="money" label="订单金额" align="center"></el-table-column>
      </el-table>
      <!--分页栏-->
      <el-pagination
        background
        align="center"
        @size-change="handleSizeChange($event,111)"
        @current-change="data()"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!--编辑框-->
    <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="100px">

        <!-- <el-form-item label="订单状态">
          <el-select
            v-model="form.statusCode"
            placeholder="订单状态"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="statu in orderStatusOptions"
              :key="statu.value"
              :label="statu.label"
              :value="statu.value"
              :disabled="statu.value == 4"
            />
            </el-select>
        </el-form-item> -->
        <el-form-item label="物流号">
          <el-input v-model="form.logisticsNumber"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submmit()">确 定</el-button>
      </span>
    </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { commodityOrderList,printOrderList,orderCommodityList,CommodityOrder,delCommodityOrder,update,inquireCommodityOrder,inquireOrderCommodity,inquirePrintOrder,profitsharing } from '@/api/app_pages/order'
import { printType } from '@/api/app_pages/device'
import { getDicts } from '@/api/system/dict/data'
import { mapState } from 'vuex'
import axios from 'axios'
import { getToken } from "@/utils/auth";
export default {
  components: {},
  data() {
    return {
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            let new_Date = new Date()
            let timesStamp = new_Date.getTime();
            let currenDay = new_Date.getDay();
            let dates = [];
            for(let i = 0; i < 7; i++) {
                dates.push(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)).toLocaleDateString().replace(/[年月]/g, '-').replace(/[日上下午]/g, ''));
            }
            picker.$emit('pick', [dates[0].replace('/','-').replace('/','-'),dates[6].replace('/','-').replace('/','-')]);
          }
        }, {
          text: '本月',
          onClick(picker) {
            let end = new Date();
            let start = new Date();
            start.setDate(1)
            end.setMonth(start.getMonth()+1);
            end.setDate(0);
            picker.$emit('pick', [new Date(start),new Date(end)]);
          }
        }]
        },
        size: 20,
        currentPage: 1,
        total: 0,
        queryParams: {},
        tabName: null,
        dialogTitle: "编辑订单",
        form:{},
        orderShow: false,
        dialogVisible: false,
        orderTypeOptions: [],
        orderStatusOptions: [],
        printOptions: [],
        date: []
        };
    },
    created() {
        this.tabName = this.$route.path.split("/")[2]
        if(this.tabName  == '订单列表'){
          getDicts('g_order_status').then(res => {
            let data = []
            res.data.forEach(function (item, index) {
                data.push({label:item.dictLabel,value:item.dictValue})
            });
            this.orderStatusOptions = data
          })
          getDicts('g_facility_type').then(res => {
            let data = []
            res.data.forEach(function (item, index) {
                data.push({label:item.dictLabel,value:item.dictValue})
            });
            this.orderTypeOptions = data
          })
        }else{
          getDicts('fac_print_type').then(res => {
            let data = []
            res.data.forEach(function (item, index) {
                data.push({label:item.dictLabel,value:item.dictValue})
            });
            this.orderTypeOptions = data
          })
          printType().then(res => {
                res.rows.forEach(item => {
                    this.printOptions.push({label:item.type,value:item.code})
                });
            })
        }

        this.data()
    },
    methods: {
      data(){
        if(this.tabName  == '订单列表'){
          commodityOrderList(this.size,this.currentPage).then(res => {
              this.tableData = res.rows
              this.total = parseInt(res.total)
          })
        }else if(this.tabName  == '打印订单列表' || this.tabName  == '办公打印列表' || this.tabName  == '设备订单记录'){
          printOrderList(this.size,this.currentPage).then(res => {
              this.tableData = res.rows
              this.total = parseInt(res.total)
          })
        }else if(this.tabName  == '商品订单列表'){
          orderCommodityList(this.size,this.currentPage).then(res => {
              this.tableData = res.rows
              this.total = parseInt(res.total)
          })
        }
      },
      handleQuery() {
        this.queryParams.startDate = this.date[0]
        this.queryParams.endDate = this.date[1]
        this.queryParams.pageNum =  this.currentPage
        this.queryParams.pageSize = this.size
        if(this.tabName  == '订单列表'){
          inquireCommodityOrder(this.queryParams).then(res =>{
            this.tableData = res.rows
            this.total = parseInt(res.total)
          })
        }else if(this.tabName  == '打印订单列表' || this.tabName  == '办公打印列表' || this.tabName  == '设备订单记录'){
          inquirePrintOrder(this.queryParams).then(res =>{
            this.tableData = res.rows
            this.total = parseInt(res.total)
          })
        }else if(this.tabName  == '商品订单列表'){
          this.queryParams.orderNumber = this.queryParams.number
          this.$delete(this.queryParams,'number')
          inquireOrderCommodity(this.queryParams).then(res =>{
            this.tableData = res.rows
            this.total = parseInt(res.total)
          })
        }

      },
      resetQuery(){
        this.queryParams = {}
        this.date = []
      },
      updateOrder(id){
        this.dialogVisible = true
        this.form.id = id;
        CommodityOrder(this.form.id).then(res => {
            this.form = res.data
        })
      },
      goToCommodity(list){
        this.tableData = list
        this.total = list.length
        this.orderShow = true
      },
      backToOrder(){
        this.orderShow = false
        this.data()
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
        .then(_ => {
            done();
        })
        .catch(_ => {});
      },
      submmit(){
        this.form.isPay = true
        this.form.isSend = true
        this.form.isSignIn = false
        this.$delete(this.form,'Status')
        this.$delete(this.form,'number')
        this.$delete(this.form,'userId')
        this.$delete(this.form,'money')
        this.$delete(this.form,'payMoney')
        this.$delete(this.form,'statusCode')
        this.$delete(this.form,'statusValue')
        this.$delete(this.form,'payType')
        this.$delete(this.form,'payTypeValue')
        this.$delete(this.form,'addressId')
        this.$delete(this.form,'addressName')
        this.$delete(this.form,'positionProvince')
        this.$delete(this.form,'positionCity')
        this.$delete(this.form,'positionDetails')
        this.$delete(this.form,'buyerMessage')
        this.$delete(this.form,'createDate')
        this.$delete(this.form,'orderCommodityList')
        this.$delete(this.form,'payDate')
        this.$delete(this.form,'userName')
        this.$delete(this.form,'gaddress')
        new Promise((resolve,reject) =>{
          update(this.form).then(res => {
            this.dialogVisible = false
            resolve()
          })
        }).then(res => {
          this.data()
        })
      },
      remove(id){
        new Promise((resolve,reject) =>{
            delCommodityOrder(id).then(res => {
              resolve()
            })
        }).then(res => {
          this.data()
        })
      },
      handleSizeChange(val,e) {
          this.size = val
          this.data()
      },
      isAccountShow(row){ //判断是否显示分账按钮 ，只有支付成功，并且支付时间在当前时间5分钟以上的
        if(row.pay ){
          if(!row.separate){
            let tiem = new Date().getTime()
            let paydate = new Date(row.payDate).getTime()
            if(tiem - paydate >= 300000){  // 支付大于5分钟显示分账按钮
               return true
            }else{
               return false
            }
          }else{
              return false
          }
        }else{
          return false
        }
      },
      profitsharing(orderId){
        // new Promise((resolve,reject) =>{
        //   axios({
        //     method: 'get',
        //     url: '/prod-api/system/pay/notify/profitsharing/'+orderId,
        //     // headers: { 'Authorization': 'Bearer ' + getToken() },
        //   }).then(res => {
        //       if (res.data.code !== 200 ){
        //          this.$message.error(res.data.msg);
        //       } else{
        //          this.$message.success(res.data.msg);
        //          this.data();
        //       }
        //    });
        // })
 
        profitsharing(orderId).then(res => {
              if (res.code !== 200 ){
                 this.$message.error(res.msg);
              } else{
                 this.$message.success(res.msg);
                 this.data();
              }
             }, error => {

           });
      },
    }

};
</script>
<style>
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
  .box-card {
    margin: 0 auto;
  }
  .url {
      width: 50px;
      height: 50px;
      display: block;
      margin: 0 auto;
  }
</style>
